<template>
    <div class="titleview">
        <img class="titleview-img" src="../assets/titleback.png" alt="">
        <p class="titleview-p">{{ title }}</p>
        <div class="titlemore" v-if="titlemore" @click="moreclick">
            <div class="titlemore_dian"></div>
            <div class="titlemore_dian"></div>
            <div class="titlemore_dian"></div>
        </div>

        <!-- <dv-decoration-2 class="writelight"></dv-decoration-2> -->
        <!-- <div class="writelight_div"></div> -->
         <div class="writelight_divs"></div>
    </div>
</template>

<script>
export default {
    name: "Titleview",
    props: {
        title: {
            type: String,
            default: "暂无标题"
        },
        titlemore: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        /**
         * 
         */
        moreclick() {
            this.$emit('titleClick', this.title)

        }
    }
}
</script>

<style lang="scss" scoped>
.titleview {
    width: 368px;
    height: 17px;
    position: relative;
    padding: 40px 0px 20px 0px;
    .writelight_divs{
        position: absolute;
        width: 95%;
        height: 1px;
        background-color: #fff;
        bottom:10px;
        left: 33px;
        background-color: rgba(225, 225, 225, 0);
        overflow: hidden;
        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: -100%;
            /* 初始位置在盒子外部左侧 */
            width: 100%;
            /* 宽度是盒子的两倍，以确保动画可以循环 */
            height: 1px;
            /* 下边线的厚度 */
            animation: moveAndFade 2s linear infinite;
            background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
            /* 动画设置 */
        }
    }
   



    .titlemore {
        top: 36px;
        right: 31px;
        position: absolute;
        width: 28px;
        height: 28px;
        // background-color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9;

        .titlemore_dian {
            width: 3px;
            height: 3px;
            background: #D0E5F5;
            border-radius: 50%;

            &:nth-child(1) {
                margin: 0;
            }

            margin-left: 2px;
        }
    }

    .titleview-img {
        position: absolute;
        width: 425px;
        height: 77px;
        top: 0;
        left: 0;


    }

    .titleview-p {
        padding-left: 57px;
        margin: 0;
        font-family: 'PingFang SC';
        font-weight: 400;
        font-size: 18px;
        color: #FFFFFF;
        // z-index: 999;
    }

    .writelight {
        position: absolute;
        top: 55px;
        left: 31px;
        width: 320px;
        height: 28px;

    }

    .writelight_div {
        position: absolute;
        top: 36px;
        left: 0px;
        width: 350px;
        height: 28px;
        overflow: hidden;

        &::before {
            display: block;
            left: -136px;
            // top: -200%;
            // left: -100%;
            width: 100%;
            height: 100%;
            transform: rotate(49deg);
            background: linear-gradient(45deg, rgba(93, 113, 131, 0.5), rgba(225, 225, 225, 0.5));
            content: '';
            z-index: 9;
            position: absolute;
            animation: crossed 2.5s infinite;

        }
    }
}

@keyframes moveAndFade {
    0% {
        left: 0%;
        /* 起始位置 */
    }

    50% {
        left: 50%;
        /* 中间位置，但由于宽度是200%，所以看起来像是移动到了一半 */
    }

    100% {
        left: 100%;
        /* 中间位置，但由于宽度是200%，所以看起来像是移动到了一半 */
    }
}

@keyframes crossed {
    0% {
        // top: -200%;
        left: -136px;
    }

    100% {
        // width: 10%;
        // height: 10%;
        // top: -50px;
        left: 100%;
    }
}
</style>